import React, { Component } from 'react'
import '../assert/css/coupon.css'

import { userinfo,dateFmt } from '../utils/getUserInfo'
import Header from '../components/DefaultHeader'

import {selectActionAsync} from '../store/actionCreateor'
import {connect} from 'react-redux'

class Coupon extends Component {
    state = {
        userList: [
            {content:[]},
            {content:[]},
            {content:[]}
        ],
        index: 0
    }
    UNSAFE_componentWillMount() {
        this.props.getCouponAsync()
        setTimeout(()=>{
            this.setState({userList:this.props.couponList})
        },100)
        
        
    }
    render() {
        const { userList, index } = this.state
        return (
            <div className="coupon-container">
                <Header title="优惠券"/>
                <div className="tabs">
                    <div className={index === 0 ? 'active' : ""} onClick={() => this.setState({ index: 0 })}>未使用</div>
                    <div className={index === 1 ? 'active' : ""} onClick={() => this.setState({ index: 1 })}>已使用</div>
                    <div className={index === 2 ? 'active' : ""} onClick={() => this.setState({ index: 2 })}>已失效</div>
                </div>
                <div className="list">
                    {
                        userList[index].content.map(item => (
                            <div className="item" key={item.id}> 
                                <div className="content">
                                    <div className="price">
                                        <h2>&yen; <span>{item.money}</span></h2>
                                        <small className="tips">满{item.limit_money}元可用</small>
                                    </div>
                                    <div>
                                        <p>{item.title}</p>
                                        <small>{dateFmt(item.begintime)}至{dateFmt(item.endtime)}</small>
                                    </div>
                                </div>
                                <div className="rules">
                                    {item.description}
                                </div>
                            </div>

                        ))
                    }


                </div>
            </div>
        )
    }
}

const mapState=(state)=>{
    return {
        couponList: state
    }
}

const mapDispath=(dispatch)=>{
    return {
        getCouponAsync: ()=>dispatch(selectActionAsync())
    }
}

export default connect(mapState,mapDispath)(Coupon)